<template>
	<div class="vip_left clearfix">
		<div class="vip-left-menu">

			<el-menu :default-active="defaultActive" unique-opened router text-color="#333333" active-text-color="#0F54BC" class="el-menu-vertical-demo">
				<el-menu-item index="/vip/p_policy"><span slot="title">政策申报</span></el-menu-item>
				<el-submenu index="1">
					<template slot="title"><span>我的招聘</span></template>
					<el-menu-item-group>
						<el-menu-item index="/vip/p_resume">我的简历</el-menu-item>
						<el-menu-item index="/vip/p_delivery">我的投递</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="2">
					<template slot="title"><span>交流反馈</span></template>
					<el-menu-item-group>
						<el-menu-item index="/vip/p_exchange">交流建议</el-menu-item>
						<el-menu-item index="/vip/p_coopera">合作申请</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="3">
					<template slot="title"><span>账号管理</span></template>
					<el-menu-item-group>
						<el-menu-item index="/vip/p_info">用户资料</el-menu-item>
						<el-menu-item index="/vip/p_password">密码修改</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>

		</div>
	</div>
</template>
<script>
	import {
		jumpRout
	} from '@/utils/js.js'
	export default {
		data() {
			return {
				defaultActive: '',
			}
		},
		computed: {
			locale: {
				get() {
					return this.$store.state.locale;
				},
				set(val) {
					this.$store.state.locale = val;
				}
			},

		},
		watch: {

		},
		mounted() {
			// 获取当前路由
			console.log(this.$route)
			this.defaultActive = this.$route.path
		},
		// ******************* methods 开始 ****************** //
		methods: {
			//页面跳转事件
			jump(e) {
				let curUrl = this.$route.path
				if (curUrl.indexOf(e) == -1) {
					jumpRout(this, e, '', () => {})
					this.curPath = e
				}
			},
		}
		// ******************** methods结束 ***************** //
	}
</script>
<style lang="scss">
	.vip_left {
		float: left;
	}

	.vip-left-menu {
		width: 200px;
		min-height: 640px;
		background-color: #fff;
	}

	.el-menu {
		border-right: 0;
	}

	.vip-left-menu>.el-menu>li {
		border-bottom: 1px solid #EDEDED;
	}

	.vip-left-menu .el-submenu__title {
		font-size: 16px;
		padding-left: 28px !important;
		border-left: 2px solid transparent;
		position: relative;
	}

	.vip-left-menu>.el-menu>.el-menu-item {
		font-size: 16px;
		padding-left: 28px !important;
		position: relative;
	}

	.vip-left-menu .el-menu-item-group__title {
		padding: 0;
	}

	.vip-left-menu .el-submenu.is-active .el-submenu__title::before,
	.vip-left-menu>.el-menu>.el-menu-item.is-active::before {
		content: "";
		height: 24px;
		border-left: 2px solid #0F54BC;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
</style>
